<template>
  <div class="app-container settingWord">
    <div class="head-container">
      <public-header />
    </div>
    <div class="header-title">设置搜索词条</div>
    <el-form
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="120px"
      class="demo-dynamic"
    >
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        :label="'输入搜索词条 :'"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
      >
        <!-- :rules="{
          required: true,
          message: '输入搜索词条不能未空',
          trigger: 'change',
        }" -->
        <el-input v-model="domain.value"></el-input>
        <img
          src="../../../public/images/setting/add-souci.png"
          alt=""
          @click="addDomain"
          v-if="index == 0"
        />
        <img
          v-if="index >= 1"
          src="../../../public/images/setting/delete-souci.png"
          alt=""
          @click.prevent="removeDomain(domain)"
        />
      </el-form-item>
      <el-form-item>
        <!-- <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
    <div class="submitBtn">
      <el-button type="primary" @click="submitForm(dynamicValidateForm.domains)"
        >完成</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      dynamicValidateForm: {
        domains: [
          {
            value: "",
          },
        ],
      },
    };
  },
  components: {
    PublicHeader: () => import("../../components/PublicHeader"),
  },
  methods: {
    submitForm(formName) {
      // console.log(formName);
      formName.map((e) => {
        // console.log(e);
        if (e.value == "") {
          this.$alert("请输入搜索词条!");
        }
      });
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      // console.log(this.dynamicValidateForm.domains.length);
      let lengthFive = this.dynamicValidateForm.domains.length;
      if(lengthFive >= 5){
        this.$alert('最多添加五个搜索词条哦')
        return
      }
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
  },
};
</script>
<style lang="less" scoped>
.settingWord {
  .header-title {
    color: #24a5e0;
    font-size: 18px;
  }
  .el-form {
    width: 45%;
    height: 300px;
    // border: 1px solid #f5f5;
    margin: 70px auto;
    .el-input {
      width: 260px;
      padding-right: 10px;
      color: #333;
      font-weight: 500;
    }
    img {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
  }
  .submitBtn {
    width: 100%;
    margin: 100px auto 0;
    text-align: center;
    .el-button {
      width: 300px;
      height: 44px;
      font-size: 18px;
    }
  }
}
</style>
<style lang="less">
.settingWord {
  .el-form-item__label {
    color: #333;
  }
}
</style>
